<template>
  <div class="navigation-bar">
    <div class="navigation-bar-top">
      <img class="navigation-bar-logo" src="../assets/header_logo.png" />
      <div class="navigation-bar-list">
        <NavigationItem
          v-for="(item, index) in title_list"
          :key="index"
          class="navigation-bar-list-item"
          :title="item.title"
          :opening="item.isopen"
          :link="item.link"
          @click.native="changePages(index)"
        ></NavigationItem>
        <el-button
          v-show="!is_logined"
          @click="toLogin"
          style="height: 60%; margin-left: 20px"
          type="warning"
          plain
          >登陆</el-button
        >
        <el-link
          @click="toadmin"
          style="margin-left: 20px; font-size: 22px"
          v-show="is_logined"
          type="success"
          >{{ user_name }}</el-link
        >
      </div>
    </div>
    <div class="navigation-bar-bottom"></div>
  </div>
</template>

<script>
import NavigationItem from "./NavigationItem.vue";

export default {
  name: "NavigationBar",
  components: {
    NavigationItem,
  },
  data: function () {
    return {
      last_index: 0,
      is_logined: false,
      user_name: "游客",
      title_list: [
        {
          title: "首页",
          isopen: true,
          link: "/Menu/Home",
        },
        {
          title: "研究团队",
          isopen: false,
          link: "/Menu/Team",
        },
        {
          title: "研究成果",
          isopen: false,
          link: "/Menu/Achievement",
        },
        {
          title: "学术活动",
          isopen: false,
          link: "/Menu/Activity",
        },
        {
          title: "联系我们",
          isopen: false,
          link: "/Menu/Contact",
        },
      ],
    };
  },
  methods: {
    changePages(index) {
      this.title_list[this.last_index].isopen = false;
      this.title_list[index].isopen = true;
      this.last_index = index;
    },
    toLogin() {
      this.$router.push({ name: "Login" });
    },
    toadmin() {
      this.$router.push("/admin");
    },
    logined() {
      this.is_logined = true;
      this.user_name = localStorage.getItem("user_name");
    },
  },
  mounted() {
    this.$EventBus.$on("logined", this.logined);
  },
};
</script>

<style>
.navigation-bar {
  height: 80px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}
.navigation-bar-top {
  width: 80%;
  height: 95%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
.navigation-bar-logo {
  height: 70%;
}
.navigation-bar-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}
.navigation-bar-bottom {
  width: 100%;
  height: 5%;
  background: linear-gradient(#dedede, white);
}
</style>